<template>
  <div class="view">
    <x-header :left-options="{backText: ''}"
              class="vux-1px-b">朋友圈</x-header>
    <div class="header">
    </div>
    <div class="recommend">
      <p>-- 推荐人 --</p>
      <div class="left">
        <p style="height: 100%;"><img :src="head_img || userHead"
               alt=""
               v-imgField></p>
      </div>
      <div class="right">
        <p><label>{{true_name}}</label>
          <img v-if="account_level_id==1"
               style="width: .875rem;"
               src="http://img.zanjl.com/Content/img/image/VIPPT.png" alt="">
          <img v-if="account_level_id==2"
               style="width: .875rem;"
               src="http://img.zanjl.com/Content/img/image/VIPCZ.png" alt="">
          <img v-if="account_level_id==3"
               style="width: .875rem;"
               src="http://img.zanjl.com/Content/img/image/VIPCJ.png" alt="">
          <img v-if="account_level_id==4"
               style="width: .875rem;"
               src="http://img.zanjl.com/Content/img/image/VIPZJ.png" alt="">
          <img v-if="account_level_id==5"
               style="width: .875rem;"
               src="http://img.zanjl.com/Content/img/image/VIPGJ.png" alt="">
        </P>
        <p><label>{{user_name.substr(0,3)+"****"+user_name.substr(7)}}</label></p>
      </div>
    </div>

    <div class="invite">
      <p>-- 邀请的好友 --</p>
      <div v-for="(item,index) in dataList" :key="index">
        <div class="left">
          <p style="height: 100%;"><img :src="item.head_img || userHead"
                 alt
                 v-imgField></p>
        </div>

        <div class="right">
          <p><label>{{item.true_name}}</label>
            <img v-if="item.account_level_id==1"
                 style="width: .875rem;"
                 src="http://img.zanjl.com/Content/img/image/VIPPT.png" alt="">
            <img v-if="item.account_level_id==2"
                 style="width: .875rem;"
                 src="http://img.zanjl.com/Content/img/image/VIPCZ.png" alt="">
            <img v-if="item.account_level_id==3"
                 style="width: .875rem;"
                 src="http://img.zanjl.com/Content/img/image/VIPCJ.png" alt="">
            <img v-if="item.account_level_id==4"
                 style="width: .875rem;"
                 src="http://img.zanjl.com/Content/img/image/VIPZJ.png" alt="">
            <img v-if="item.account_level_id==5"
                 style="width: .875rem;"
                 src="http://img.zanjl.com/Content/img/image/VIPGJ.png" alt="">
          </P>
          <p><label>{{item.user_name.substr(0,3)+"****"+item.user_name.substr(7)}}</label><label style="float: right; margin-right: 4%;">{{item.reg_time | formatDate}}</label></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { XHeader } from 'vux'
import { GetUserLevelInfo, GetUserSLevel } from '@api'
import { mapMutations, mapState } from 'vuex'
import { SET_LOADING } from '@store/type'
import { formatDate } from '../../../filters/date.js'
export default {
  // 转换时间格式
  filters: {
    formatDate (time) {
      var dtime = time.slice(6, 19)
      var date = new Date(parseInt(dtime))
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  components: {
    XHeader
  },
  data () {
    return {
      userHead: 'http://img.zanjl.com/Content/img/image/user_head.png',
      dataList: {},
      user_name: '***********',
      head_img: '',
      true_name: '无',
      account_level_id: 0
    }
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    ...mapMutations({
      setLoading: SET_LOADING
    }),
    async loaduserslevel () {
      this.setLoading({
        status: true,
        opacity: 0
      })
      // 获取上级会员
      let res = await GetUserSLevel(this.user.user_id)
      if (res.code === 200) {
        if (res.data.user_name.length > 0) {
          this.user_name = res.data.user_name
          this.true_name = res.data.true_name
          this.account_level_id = res.data.account_level_id
          this.head_img = res.data.head_img
        }
      }
    },
    // 加载数据列表
    async loadjifenrecord () {
      this.setLoading({
        status: true,
        opacity: 0
      })
      // 获取下级会员
      let ress = await GetUserLevelInfo(this.user.user_id)
      this.setLoading(false)
      if (ress.code === 200) {
        this.dataList = ress.data
      }
    }
  },
  created () {
    this.loaduserslevel()
    this.loadjifenrecord()
  },
  activated () {
  }

}
</script>

<style lang="scss" scoped>
@import "../../../assets/css/pub";
.view {
  background: #fd4e41;
  text-align: center;
  height: 100%;
  .header {
    text-align: center;
    width: 100%;
    background-image: url("http://img.zanjl.com/Content/img/image/relationship_png@2x.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 5rem;
    padding: 5%;
    color: white;
    p {
      padding-top: 0;
    }
    .numberr {
      font-size: 40pt;
      margin-top: 10%;
    }
    .addfont {
      font-size: 9pt;
      img {
        margin-bottom: -.05rem;
      }
    }
  }
  .recommend {
    background: #fffefc;
    text-align: center;
    margin: 5%;
    border-radius: .125rem;
    border: 0.1rem solid #fddb8e;
    margin-top: -1rem;
    p {
      margin: 3% 0;
    }
    .left {
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 50%;
      margin: 0 0 3% 3%;
      float: left;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .right {
      height: 1.5rem;
      text-align: left;
      margin-left: 2rem;
      font-size: 0.35rem;
    }
  }
  .invite {
    background: #fffefc;
    text-align: center;
    margin: 5%;
    border-radius: .125rem;
    border: 0.1rem solid #fddb8e;
    p {
      margin: 3% 0;
    }
    .left {
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 50%;
      margin: 0 0 3% 3%;
      float: left;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .right {
      height: 1.5rem;
      text-align: left;
      margin-left: 2rem;
      font-size: 0.35rem;
    }
  }
}
</style>
